import React, {useEffect, useState} from 'react'
import {Form, Button, message} from 'antd'
import {connect, history} from 'umi'
import {getDict} from '@/service/common/dict'
import {PageType} from '../constant'
import {getCompany} from '@/service/common/index'
import {fleetAdd, getFleetDetail, fleetEdit} from '@/service/customer/fleet'
import VehicleInfo from '../components/VehicleInfo'
import FleetInfo from '../components/FleetInof'
import ManagerInfo from '../components/ManagerInfo'
import styles from './index.less'
import {translateDataToTree} from '@/utils/common'
import Modal from '@/components/Modal'

const add = (props: any) => {
	const routerQuery = props.location.query
	const pageType = routerQuery.type
	const [fleetInfoForm] = Form.useForm()
	const [dict, setDict] = useState<any>({
		yes_no: [],
		Car_Company_Type: [],
	})
	const [detailRecrod, setDetailRecord] = useState<any>({})
	const [companyData, setCompanyData] = useState<any[]>([])
	const [formData, setFormData] = useState<any>({}) // 暂存的表单数据
	const [isModalOpen, setIsModalOpen] = useState(false) // 二次确认弹窗
	const [btnLoading, setBtnLoading] = useState(false) // 按钮loading

	const getDetail = async () => {
		const data = await getFleetDetail({id: routerQuery.id})
		if (data.code === 0) {
			setDetailRecord(data.data)
		}
	}

	/** 获取所属公司数据 */
	const onCompany = () => {
		getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
			if (res?.success) {
				const list = translateDataToTree(res.data)
				setCompanyData(list as any)
			}
		})
	}

	useEffect(() => {
		getDict(
			{
				dictKeys: ['yes_no', 'Car_Company_Type'],
			},
			(res: any) => {
				setDict(res)
			},
		)
		if (pageType !== PageType.Add) {
			getDetail()
		}
		onCompany()
	}, [])
	const onSubmit = () => {
		setBtnLoading(true)
		let request: any
		formData.cityId = formData.cityId
			? formData.cityId[formData.cityId.length - 1]
			: undefined

		if (pageType === PageType.Add) {
			request = fleetAdd(formData)
		} else if (pageType === PageType.Ddit) {
			const obj = {...formData, id: routerQuery.id}
			request = fleetEdit(obj)
		}
		request
			.then((res: any) => {
				if (res.success) {
					message.success(res.msg)
					history.goBack()
					setBtnLoading(false)
				} else {
					setBtnLoading(false)
				}
			})
			.catch((err: any) => {
				message.error(err)
				setBtnLoading(false)
			})
	}

	return (
		<div className={styles.add}>
			<FleetInfo
				fleetInfoForm={fleetInfoForm}
				pageType={pageType}
				dict={dict}
				detailRecrod={detailRecrod}
				companyData={companyData}
			/>

			{pageType === PageType.Ddit && (
				<>
					<VehicleInfo pageType={pageType} fleetId={routerQuery.id} />
					{Form.useWatch('isNeedAdmin', fleetInfoForm) === '0' && (
						<ManagerInfo
							pageType={pageType}
							fleetId={routerQuery.id}
						/>
					)}
					{/* <ManagerInfo pageType={pageType} fleetId={routerQuery.id} /> */}
				</>
			)}

			<div className={styles.operation}>
				<Button
					type="primary"
					htmlType="submit"
					onClick={async () => {
						const form = await fleetInfoForm.validateFields()
						if (form) {
							setFormData(form)
							setIsModalOpen(true)
						}
					}}>
					保存
				</Button>

				<Button
					style={{marginLeft: '5px;'}}
					onClick={() => {
						history.go(-1)
					}}>
					取消
				</Button>
			</div>
			<Modal
				text="确定要保存吗？请仔细核对所填信息"
				loading={btnLoading}
				onSubmit={onSubmit}
				isModalOpen={isModalOpen}
				setIsModalOpen={setIsModalOpen}
			/>
		</div>
	)
}

export default connect(({user}: any) => ({user}))(add)
